import React, { useState } from 'react'

export default function App() {
    const [title, setTitle] = useState("隐藏")
    const [isShow, setIsShow] = useState(true)
    return (
        <div>
            <Navbar title={title} callback={() => {
                setIsShow(!isShow)
                setTitle(isShow ? "显示" : "隐藏")
            }} />
            {isShow && <Sidebar />}
        </div>
    )
}

interface IProps {
    title?: string,
    callback?: () => void
}

function Navbar(props: IProps) {
    return (
        <div>
            Navbar-<button onClick={() => {
                props.callback && props.callback()
            }}>{props.title}</button>
        </div>
    )
}

function Sidebar() {
    return (
        <div>
            Sidebar
        </div>
    )
}